<template>
    <ex-dialog width="700px" class="ex-diolog" :title="title" :visible="visible" @closeDialog="handleClose">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
            <el-form-item label="积分价值:" prop="integralValue">
                <span>主播1积分可抵</span>
                <el-input type="text" v-model="ruleForm.integralValue" placeholder="请输入"
                    style="width: 290px;margin-left: 20px;"><template slot="append">元</template></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">确认修改</el-button>
                <el-button @click="handleClose('ruleForm')">取消</el-button>
            </el-form-item>
        </el-form>
    </ex-dialog>
</template>
<script>
// components
import Loading from '@/components/Loading/index'
// api
import {
    editIntegralValue,
    userInfo,
} from "@/api/setting/anchorList"

export default {
    components: {
        Loading
    },
    props: {
        visible: Boolean,
        id: String,
        dyNumber: String,
    },
    data() {
        var integralValueCheck = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("输入积分价值"));
            } else {
                if (value !== "") {
                    var reg = /^\d+(\.\d{1,4})?$/;
                    if (reg.test(value) === false) {
                        callback(new Error("请输入正确数值，最多保留4位小数"));
                    }
                }
                callback();
            }
        };
        return {
            loading: false,
            title: '修改积分价值',
            imgLoading: false,
            ruleForm: {
                id: '',//
                integralValue: '',//积分价值
            },
            rules: {
                integralValue: [
                    { required: true, validator: integralValueCheck, trigger: ['change', 'blur'] }
                ],

            }
        }
    },
    computed: {

    },
    created() {
        this.ruleForm.id = this.id
        this.getDatail()
    },
    methods: {
        //获取详情
        getDatail() {
            var id = this.id
            userInfo(id).then(res => {
                this.ruleForm = res.result
            })
        },
        //新增主播
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loading = true
                    var data = {
                        ...this.ruleForm
                    }
                    editIntegralValue(data).then(res => {
                        setTimeout(() => {
                            this.handleClose()
                            this.$message.success('操作成功')
                            this.$emit('success')
                            this.loading = false
                        }, 1000);
                    }).catch(() => {
                        this.loading = false
                    }).finally(() => {

                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

        //取消
        handleClose(formName) {
            this.$emit('update:visible', false)
            // this.$refs[formName].resetFields();
        },
        //确认
        handleConfirm() {
            this.$emit('success', '你好')
        },
        handleSuccess(msg) {
            if (msg === '已拒绝') {
                var type = 'error'
            } else {
                var type = 'success'
            }
            this.$message({
                message: msg,
                type: type,
                duration: 1500,
                onClose: () => {
                    this.handleClose()
                    this.$emit('success')
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
    ::v-deep .ex--dialog--footer {
        border: none !important;
        padding: 0 !important;
    }

    ::v-deep .ex--dialog--main {
        padding: 10px 20px !important;
    }
}

::v-deep .avatar-uploader2 .el-upload {
    width: 100% !important;
}

.avatar-uploader2 {
    width: 130px;
    height: 130px;
    text-align: center;
    line-height: 130px;
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
}

.banner_img {
    width: 130px;
    height: 130px;
}

.el-input {
    width: 300px;
}
</style>